$(function () {
    // bootstrap-switch加载
    // 监听按钮
    $('[name="postType"]').bootstrapSwitch({
        onSwitchChange: function (event, state) {
            postType = state ? 0 : 1;
            $("#jqGrid").jqGrid('setGridParam', {page: 1}); // 从第一页开始
            $("#jqGrid").jqGrid('getGridParam', 'postData').postType = postType; // 这个只能手动修改
            $("#jqGrid").trigger("reloadGrid");
        }
    });

    var postType = 0; // 帖子类型
    $('#jqGrid').jqGrid({
        colModel: [
            {label: 'id', name: 'postId', key: true, hidden: true},
            {label: '用户id', name: 'userId', width: 40},
            {label: '标题', name: 'postTitle', width: 200},
            {label: '主图(点击放大)', name: 'mainImageUrl', width: 70, formatter: ImageUrlFormatter},
            {label: '跳转链接', width: 100, formatter: redirectUrlFormatter},
            {label: '创建时间', name: 'createTime'},
        ],

        autowidth: true, // 填充宽度到父容器
        height: 500,
        styleUI: 'Bootstrap', // 使用Bootstrap样式渲染表格
        multiselect: true, // 启用多选模式，允许用户选择多行
        rowNum: 10, // 指定初始每页显示的行数为10行
        rowList: [10, 20, 50], // 设置用户可以选择的每页行数选项
        emptyrecords: '无记录（可刷新重试）',

        url: '/admin/petPosts/list',
        datatype: 'json',
        postData: {
            postType: postType,
            userId: undefined, // 留着给搜索框
        },
        jsonReader: {
            root: 'data.list',
            total: 'data.totalPage',
            records: 'data.totalCount',
        },

        pager: "#jqGridPager", // 指定分页栏的容器，分页栏的内容将显示在具有该ID的元素中
        // 定义分页事件处理函数
        onPaging: function (pgButton) {
            // 检查用户点击的按钮是否是 "user"，即跳转按钮
            if (pgButton === 'user') {
                let pageInput = $(".ui-pg-input", "#gbox_" + this.id); // 获取页码输入框
                let pageValue = pageInput.val(); // 获取输入框中的值
                // 判断页码合理
                if (pageValue > $(this).jqGrid('getGridParam', 'lastpage')) {
                    pageInput.val($(this).jqGrid('getGridParam', 'lastpage'));
                }
            }
        },
    });

    // 窗口变化时调整宽度
    $(window).resize(function () {
        $("#jqGrid").setGridWidth($(".card-body").width());
    });

    // 删除确认按钮监听
    $('#delete').click(function () {
        var selectedRows = $("#jqGrid").jqGrid('getGridParam', 'selarrrow');
        if (selectedRows.length === 0) {
            toastr.warning('未选中记录！', '警告', {timeOut: 5000});
            return;
        }
        $.ajax({
            type: 'PUT',
            url: '/admin/petPosts/delete',
            contentType: "application/json", // 用json了一定要这个
            data: JSON.stringify(selectedRows),
            success: function (result) {
                if (result.statusCode === 200) {
                    toastr.success('删除成功！', {timeOut: 3000});
                    $("#jqGrid").jqGrid('setGridParam', {page: 1}); // 从第一页开始
                    $("#jqGrid").trigger("reloadGrid");
                } else {
                    toastr.error(result.message, {timeOut: 3000});
                }
            }
        });
    });

    // 搜索
    $('#searchLoginId').click(function () {
        $(this).attr('disabled', true);
        var searchUserId = $('#inputUserId').val();
        if (isEmpty(searchUserId)) {
            $("#jqGrid").jqGrid('setGridParam', {page: 1}); // 从第一页开始
            $("#jqGrid").jqGrid('getGridParam', 'postData').userId = undefined;
            $("#jqGrid").trigger("reloadGrid");
        } else {
            $("#jqGrid").jqGrid('setGridParam', {page: 1}); // 从第一页开始
            $("#jqGrid").jqGrid('getGridParam', 'postData').userId = searchUserId;
            $("#jqGrid").trigger("reloadGrid");
        }
        $(this).attr('disabled', false);
    });
});

function redirectUrlFormatter(cellValue, options, rowObject) {
    let url = '/post/detail/' + rowObject.postId;
    return '<a target="_blank" href="' + url + '">' + url + '</a>';
}

function ImageUrlFormatter(cellvalue) {
    return '<img src="' + cellvalue + '" height="50" width="50" alt="图片显示" onclick="showLargeImage(\'' + cellvalue + '\')"/>';
}

function showLargeImage(url) {
    $('#largeImage').attr("src", url);
    $('#modal-img').modal('show');
}